<template>
	<view class="detail-box">
		<video :src="item.videoLink" controls></video>
		<view class="title" @click="navigateToDetail">
			{{item.title}}
		</view>
		<view class="author">
			<image :src="item.touxiang" class="touxiang" mode=""></image>
			<view class="author-center">
				<view class="name">{{item.author}}</view>
				<view class="time">
					{{item.time}}
				</view>
			</view>

			<button type="default">关注</button>
		</view>
		<view class="tuijian">
			<view class="title">
				相关推荐
			</view>
		</view>
		<view class="news-conment-box">
			<view class="comment-left">
				<view class=" sp-title">
					中纪委打下2024年第一虎！钟自然接受审查调查
				</view>

				<view class="bottom-bar">
					<text class="sp-author">大皖新闻</text>
					<text class="num-comments">123评论</text>
				</view>
			</view>
			<view class="new-images">
				<image src="../../static/xw1.jpg" mode=""></image>
			</view>
		</view>
		<view class="tuijian">
			<view class="title">
				热门评论
			</view>
		</view>
		<view class="comment-box" v-if="item.comment">
			<view class="comment" v-for="(commentItem,i) in item.comment">
				<image class="touxiang" :src="commentItem.touxiang" mode=""></image>
				<view class="comment-center">
					<view class="name">
						{{commentItem.name}}
					</view>
					<view class="place">
						{{commentItem.place}}
					</view>
					<view class="content">
						{{commentItem.content}}
					</view>
				</view>
				<view class="comment-icon">
					<image src="../../static/praise_fill.png" mode="aspectFit"></image>
					<image src="../../static/brush.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="bottom-bar">
			<input type="text" placeholder="说点什么" />
			<view class="comment-icon">
				<image src="../../static/editor.png" mode="aspectFit"></image>
				<image src="../../static/collection_fill.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				item: {}
			}
		},
		methods: {

		},
		onLoad(query) {
			if (query.data) {
				this.item = JSON.parse(query.data);
				console.log('传过来了y:', this.vidioList);
			} else {
				console.log("失败");
			}
		}
	}
</script>

<style>
	.bottom-bar {
		font-size: 22rpx;
		color: #666666;
		padding: 10rpx 0;
	}

	.new-images {
		border-radius: 20rpx;
		overflow: hidden;
		height: 150rpx;
		width: 200rpx;
		background-color: #00aaff;
	}

	.new-images image {
		height: 150rpx;
		width: 200rpx;
		background-color: #00aaff;
	}

	video {
		width: 100%;
	}

	.detail-box {
		padding: 20rpx;
	}

	.title {
		font-size: 40rpx;
		padding: 30rpx 0;
	}

	.touxiang {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.author {
		margin: 50rpx 0;
		justify-content: space-between;
		display: flex;
		gap: 20rpx;
		border-bottom: #757575 solid 1rpx;
		padding-bottom: 20rpx;
	}

	.author button {
		width: 120rpx;
		height: 60rpx;
		font-size: 26rpx;
		background-color: #F5433F;
		color: white;

	}

	.time {
		font-size: 26rpx;
		color: #757575;
	}

	.name {
		font-size: 40rpx;
	}

	.author-center {
		width: 60%;
	}

	.news-conment-box {
		display: flex;
	}

	.sp-title {
		width: 90%;
	}



	.comment {
		display: flex;
		gap: 30rpx;
		align-items: center;
		margin: 30rpx 0;
	}

	.touxiang {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.place {
		font-size: 26rpx;
		color: #757575;
	}

	.name {
		font-size: 34rpx;
	}

	.comment-center {
		width: 70%;
		line-height: 40rpx;

	}

	.comment-icon {
		display: flex;
		gap: 30rpx;
	}

	.comment-icon image {
		height: 80rpx;
		width: 50rpx;
	}

	.tuijian .title {
		border-bottom: #F5433F solid 6rpx;
		width: max-content;
		padding-top: 40rpx;
	}

	.bottom-bar input {
		color: #000;
		background-color: #fff;
		width: 80%;
		padding: 30rpx 30rpx 30rpx 40px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 40rpx;
	}

	.bottom-bar {
		align-items: center;
		padding: 10rpx;
		width: 100%;
		background-color: #f3f3f3;
		position: fixed;
		display: flex;
		left: 0;
		bottom: 0;
	}

	.comment-box {
		margin-bottom: 200rpx;
	}
</style>